/* 顶部消息弹窗
 */
// 引入创建dom方法
import { createApp } from "vue";

// 引入插件模板
import messageDom from "./index.vue";

// 实例列表
let instances = [];
let uid = 0;
// 当前是否有动画在更新
let update = false;

/**
 *
 * @param {*} param0
 */
function AcMessage({
	type = "default",
	message = "",
	timeClose = 2,
	zIndex = "",
}) {
	// 计算新生成的弹窗的位置，默认50px
	let top = 50;
	top = instances.length * 100;

	// 刷新id
	uid++;

	// 创建挂载实例
	const app = createApp(messageDom, {
		uid,
		offsetTop: top,
		message,
		timeClose,
		zIndex,
		type,
		onClose: (domUid) => {
			// 时间结束，组件关闭，清理对应的实例
			// 删除已消失的单元
			let len = instances.length;
			let delIndex = -1;
			for (let i = 0; i < len; i++) {
				if (domUid === instances[i].uid) {
					delIndex = i;

					// 删除列表中
					instances.splice(i, 1);
					break;
				}
			}

			// -----------------------------------
			/* 
                删除前只有1条消息 || 
                删除的uid不存在 || 
                删除最后一条消息 
                就不需要执行下面代码了
            */
			if (len <= 1 || delIndex === -1 || delIndex >= len - 1) {
				return;
			}

			if (update) {
				return;
			}

			// 更新已删除的单元之后警告弹窗的高度
			update = true;
			// 从删除位置开始处理新的
			for (let i = delIndex; i < len - 1; i++) {
				let domEl = instances[i].el;
				const domTop = parseInt(domEl.style["top"], 10) - 100;
				domEl.style["top"] = domTop + "px";
			}

			update = false;
		},
	});

	// 将模板元素挂载到一个div上
	const instanceDom = app.mount(document.createElement("div"));

	// 该生成的div挂载到根元素
	document.body.appendChild(instanceDom.$el);

	// 将该实例记录到列表中
	instances.push({
		uid,
		el: instanceDom.$el,
	});
}

export default AcMessage;
